<template>
  <view class="container">

    <view class="map-container">
      <image class="map-img" src="/static/map.jpg"></image>
    </view>

    <view class="form-container">
      <view class="tabs">
        <text class="tab active">搭电</text>
        <text class="tab">换胎</text>
        <text class="tab">拖车</text>
      </view>

      <view class="form">
        <view class="input-group">
          <text class="label">起点</text>
          <input class="input" value="河南省焦作市山阳区32号" />
        </view>

        <view class="input-group">
          <text class="label">终点</text>
          <input class="input" value="山阳区解放路66号" />
        </view>

        <view class="input-group">
          <text class="label">求助人</text>
          <input class="input" value="张先生" />
        </view>

        <view class="input-group">
          <text class="label">联系方式</text>
          <input class="input" value="15523632541" />
        </view>

        <view class="input-group">
          <text class="label">车牌</text>
          <input class="input" value="豫CJ4321" />
        </view>

        <view class="input-group">
          <text class="label">描述</text>
          <textarea class="textarea" placeholder="请准确描述当前的状况及所需的帮助"></textarea>
        </view>

        <button class="submit-btn">呼叫救援</button>
		<view class="from-one">
			<text @click="goToJiLu">救援记录></text>
		</view>
      </view>
    </view>
<!-- 
    <view class="footer">
		<view class="footer-text">
			<text>警务求助</text>
		</view>
    </view> -->
	
  </view>
</template>

<script>
export default {
  data() {
    return {
	  
    }
  },
  methods:{
	goToJiLu(){
		uni.navigateTo({
			url:'/pages/wb-YingJiJiuYuan/JiuYuanJiLu/JiuYuanJiLu'
		});
	},
  }
}
</script>

<style>
.container {
  padding: 20rpx;
  background-color: #F7F7F7;
}

.header {
  background-color: #007AFF;
  padding: 20rpx;
  text-align: center;
}

.title {
  color: white;
  font-size: 36rpx;
}

.map-container {
  margin-top: 20rpx;
  background-color: white;
  border-radius: 10rpx;
  overflow: hidden;
}

.map-img {
  width: 100%;
  height: 300rpx;
}

.form-container {
  margin-top: 20rpx;
}

.tabs {
  display: flex;
  justify-content: space-around;
  padding: 10rpx 0;
  background-color: white;
}

.tab {
  font-size: 32rpx;
  color: #007AFF;
}

.active {
  border-bottom: 2rpx solid #007AFF;
}

.form {
  background-color: white;
  padding: 20rpx;
  border-radius: 10rpx;
}

.input-group {
  display: flex;
  align-items: center;
  margin-bottom: 20rpx;
}

.label {
  width: 150rpx;
  color: #007AFF;
}

.input, .textarea {
  flex: 1;
  padding: 10rpx;
  border: 1rpx solid #ddd;
  border-radius: 10rpx;
}

.textarea {
  height: 100rpx;
}

.submit-btn {
  width: 100%;
  height: 80rpx;
  background-color: #ff6600;
  color: white;
  font-size: 32rpx;
  text-align: center;
  line-height: 80rpx;
  border-radius: 10rpx;
  margin-top: 20rpx;
}

.footer {
  margin-top: 20rpx;
  background-color: green;
  border-radius: 10rpx;
  overflow: hidden;
}

.footer-item {
  text-align: center;
}

.footer-item.active {
  color: #ff6600;
}

.footer-item image {
  width: 40rpx;
  height: 40rpx;
  margin-bottom: 5rpx;
}
.from-one{
	background-color: red;
}
.from-one > text{
	display: block;
	height: 70rpx;
	line-height: 70rpx;
	text-align: center;
}
</style>
